<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品详情</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/swiper.min.css">
    <link rel="stylesheet" href="../../lib/css/animate.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">

    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="../../lib/css/fonts/element-icons.woff">

</head>

<body>
    <div class="app-wrap" v-cloak id="goodsDetails">
        <header-top></header-top>
        <header-search-shop :shopinfo="shopInfo"></header-search-shop>
        <goods-top-banner :imgsrc="logobanner"></goods-top-banner>
        <goods-top-nav :businessid="shopInfo.businessId"></goods-top-nav>
        <!-- 路径导航 -->
        <!-- <common-crumb :crumblist="crumblist" class="mt-30 mb-20"></common-crumb>-->
        <div class="goods_details_choose container mb-40">
            <div class="left">
                <div class="left-show"><img :src="leftShowImgSrc"></div>
                <!-- <div class="left-choose-img" v-for="(item,index) in chooseshowlist" :class="{'left-choose-img_cur':(index==leftShowImgIndex)}" @mouseEnter="inLeftChooseImg(index)" v-if='item.type=="vido"' >
                    <video :src="item.path"  controls="controls" style="height:200px;width:80px"/>
                </div>-->
                <div class="left-choose">
                    <div class="left-choose-img" v-for="(item,index) in chooseshowlist" :class="{'left-choose-img_cur':(index==leftShowImgIndex)}" @mouseEnter="inLeftChooseImg(index)" v-if='item.type=="coverImg"'>
                        <img :src="item.path">
                    </div>
                </div>
            </div>
            <div class="right">
                <h1>{{productInfo.name}}</h1>
                <div class="right">
                    <div class="right-title" v-if="activityFlag != null">
                        <div class="right-title-left">
                            <span>{{labFlag}}：</span>
                            <font>￥</font>
                            <strong v-if="activity.activityPrice >= 0">{{activity.activityPrice}}</strong>
                        </div>
                        <div class="right-title-join"><i class="icon-goods_details_join"></i>{{activity.numberOfParticipants}}人参与</div>
                        <div class="right-title-state">
                            <h1><i class="icon-goods_details_time"></i>{{activityState}}</h1>
                            <p v-if="time.day>0">{{time.day}}</p>
                            <span v-if="time.day>0">天</span>
                            <p v-if="time.hour>0">{{time.hour}}</p>
                            <span v-if="time.hour>0">时</span>
                            <p v-if="time.minute>0">{{time.minute}}</p>
                            <span v-if="time.hour>0">分</span>
                            <p v-if="time.second>0">{{time.second}}</p>
                            <span v-if="time.second>0">秒</span>
                        </div>
                    </div>
                    <div class="right-con">
                        <div class="right-con-sales">
                            <h1>月销量</h1>
                            <p>{{productInfo.monthlySales}}</p>
                        </div>
                        <div class="right-con-row price pt-20">
                            <h2>价 格</h2>
                            <div class="right-con-row-right">
                                <p><span>￥</span>{{price.toFixed(2)}}</p>
                            </div>
                        </div>
                        <div class="right-con-row discount">
                            <h2>优 惠</h2>
                            <div class="right-con-row-right">
                                <p v-for="(item,index) in couponList"><button>店铺优惠券</button><span>{{item.couponName}}</span><a @click="getCoupon(item)">领取</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="right-pei">
                        <h2>配 送</h2>
                        <div class="right-pei-right">
                            <font>广东揭阳</font>
                            至
                            <font>南京<i class="icon-address_arr"></i></font>运费：{{shopInfo.shipmentPrice}}
                        </div>
                    </div>
                    <div class="right-color">
                        <h2>颜 色</h2>
                        <div class="right-color-right">
                            <div class="right-color-right-img" v-for="(item,index) in choosemsglist" :class="{'right-color-right-img_cur':index==choosecolor}" @click="clickchoosecolor(index)">
                                <img :src="item.colorCoverPic">
                            </div>
                        </div>
                    </div>
                    <div class="right-size" v-if="choosemsglist.length">
                        <h2>尺 码</h2>
                        <div class="right-size-button" v-for="(item,index) in choosemsglist[choosecolor].productColorSizeList" :class="{'right-size-button_cur':index==choosesize}" @click="clickchoosesize(index)">
                            <button>{{item.name}}</button>
                        </div>
                    </div>
                    <div v-if="productInfo.isCustomized==0" class="right-color right-size">
                        <h2>定 制</h2>
                        <div>
                            <div class="right-size" style="padding-bottom:0;border:0;">
                                <div class="right-size-button" :class="{'right-size-button_cur':0==choosedz}" @click="clickchoosedz(0)">
                                    <button>不定制</button>
                                </div>
                                <div class="right-size-button" :class="{'right-size-button_cur':1==choosedz}" @click="clickchoosedz(1)">
                                    <button>我要定制</button>
                                </div>
                            </div>
                            <!-- 定制的具体需求 -->
                            <div v-if="choosedz==1">
                                <div v-for="(yangshi,index) in dinzhiList">
                                    <div class="right-dz-title">{{yangshi.customizatName}}</div>
                                    <div class="right-dz-box">
                                        <div class="right-dz-item" v-for="(zhi,xiabiao) in yangshi.attributeCustomizations" @click="isCheckThisVal(index,xiabiao)">
                                            <input type="radio" :value="zhi.id" v-model="customizationVos[index]" :name="yangshi.customizatName"> {{zhi.name}}
                                            <img :src="zhi.imgUrl">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right-buy">
                        <div class="right-buy-numbtn">
                            <div class="right-buy-numbtn-num">{{goodsNum}}</div>
                            <button class="right-buy-numbtn-btn" @click="addGoodsNum()">+</button>
                            <button class="right-buy-numbtn-btn" @click="redGoodsNum()">-</button>
                        </div>
                        <button v-if="activityFlag != 1" class="right-buy-btn" @click="nowBuyProduct">立即购买</button>
                        <button v-if="activityFlag == null" class="right-buy-btn right-buy-btn_cur" @click="addShopCart">加入购物车</button>
                        <button v-if="activityFlag == 1" class="right-buy-btn" @click="nowBuyProduct">{{activity.demandNumber}}人拼团购买</button>
                        <button v-if="activityFlag != null" class="right-buy-btn right-buy-btn_cur" @click="addShopCart">单独购买</button>
                    </div>
                    <!-- <div class="right-promise">
                        <a v-for="item in businesspromise" :href="item.href" target="_black">{{item.text}}</a>
                    </div>-->
                    <div class="right-share">
                        <p @click="followProduct"><i class="icon-goods_details_col"></i>{{productInfo.isFollow ? "收藏商品":"已收藏"}}</p>
                        <div class="bdsharebuttonbox" style="float:right; position:relative;top:-8px; left:-20px; width:200px;height:8px; border:solid 0px #333;text-align: center;">
                            <a href="#" class="bds_more" data-cmd="more" style="background-image: none; line-height: 20px;">
                                <i class="icon-goods_details_share bdsharebuttonbox" style="float: left;margin-right: 10px; "></i>分享</a>
                            <a href="#" class="bds_qzone" data-cmd="qzone"></a>
                            <a href="#" class="bds_tsina" data-cmd="tsina"></a>
                            <a href="#" class="bds_tqq" data-cmd="tqq"></a>
                            <a href="#" class="bds_renren" data-cmd="renren"></a>
                            <a href="#" class="bds_weixin" data-cmd="weixin"></a>
                        </div>
                        <script>
                            window._bd_share_config = {
                                "common": {
                                    "bdSnsKey": {},
                                    "bdText": "",
                                    "bdMini": "2",
                                    "bdPic": "",
                                    "bdStyle": "0",
                                    "bdSize": "16"
                                },
                                "share": {},
                                "image": {
                                    "viewList": ["qzone", "tsina", "tqq", "renren", "weixin"],
                                    "viewText": "分享到：",
                                    "viewSize": "16"
                                },
                                "selectShare": {
                                    "bdContainerClass": null,
                                    "bdSelectMiniList": ["qzone", "tsina", "tqq", "renren", "weixin"]
                                }
                            };
                            with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
                        </script>
                    </div>
                </div>
            </div>
        </div>
        <!-- 团购规则 -->
        <div class="goods_details_tuanrule container mb-20" v-if="activityFlag == 1">
            <p>参团成员</p>
            <div class="left">
                <h1><i class="icon-goods_details_con_title"></i>团购规则：</h1>
                <p>1. 开团：选择商品，团购价购买，付款成功后即开团成功；</p>
                <p>2. 参团：已开团，可以选择参团购买商品，付款后即参团成功，若多人同时支付，按先支付成功的用户获得参团资格；</p>
                <p>3. 成团：在开团或参团之后，可以分享邀请好友参团，在有效时间凑齐成团人数即拼团成功；</p>
                <p>4. 组团失败：在有效时间内未凑齐人数，则为组团失败，此时系统自动将款项退回给用户。</p>
            </div>
            <div class="right">
                <div class="right-col">
                    <div class="right-col-num-border">
                        <div class="right-col-num">1</div>
                        <div class="bar"></div>
                    </div>
                    <p>选择商品</p>
                </div>
                <div class="right-col">
                    <div class="right-col-num-border">
                        <div class="right-col-num">2</div>
                        <div class="bar"></div>
                    </div>
                    <p>开团/参团</p>
                </div>
                <div class="right-col">
                    <div class="right-col-num-border">
                        <div class="right-col-num">3</div>
                        <div class="bar"></div>
                    </div>
                    <p>邀请好友</p>
                </div>
                <div class="right-col">
                    <div class="right-col-num-border">
                        <div class="right-col-num">4</div>
                    </div>
                    <p>人满成团</p>
                </div>
            </div>
        </div>
        <!-- 参团成员 -->
        <div class="goods_details_tuanmember container mb-20" v-if="activityFlag == 1">
            <p>详细规则</p>
            <h1>参团成员</h1>
            <div class="member">
                <div class="member-col">
                    <img src="https://dummyimage.com/58x58/79b0f2">
                    <p>团长</p>
                </div>
                <div class="member-col member-col_no">
                    <img src="../../img/goods_details_member.png">
                </div>
            </div>
        </div>
        <div class="goods_details_title container">
            <p :class="{cur:(showcon==1)}" @click="clicktitle(1)">商品详情</p>
            <p :class="{cur:(showcon==2)}" @click="clicktitle(2)">累计评论</p>
        </div>
        <!-- 商品详情 -->
        <div class="goods_details_con container" v-show="showcon==1">
            <div class="goods_details_con-title mb-20">
                <i class="icon-goods_details_con_title"></i>
                <p>商品参数</p>
                <span>DETAIL</span>
            </div>
            <div class="goods_details_con-param mb-30">
                <div class="goods_details_con-param-con" v-for="item in goodsparam">
                    <h1>{{item.specName}}：</h1>
                    <p>{{item.valueName}}</p>
                </div>
                <div class="goods_details_con-param-con" v-if="goodsparam.length%2==1">
                    <h1> </h1>
                    <p> </p>
                </div>
            </div>
            <div class="goods_details_con-title mb-30">
                <i class="icon-goods_details_con_title"></i>
                <p>商品展示</p>
                <span>IMAGE</span>
            </div>
            <!-- goods_details_con-showimg -->
            <div class=" mb-20" v-html="desciption">
                <!--<img v-for="item in goodsshowimg" :src="item">-->
                <!--{{desciption}}-->
            </div>
            <!--
            <div class="goods_details_con-title">
                <i class="icon-goods_details_con_title"></i>
                <p>商品尺码</p>
                <span>SIZE</span>
            </div>
            <div class="goods_details_con-size mb-60">
                <h1 v-if="goodssizetips">TIPS:</h1>
                <p v-for="item,index in goodssizetips">{{index+1}}.{{item}}</p>
                <h1>尺码对照表:</h1>
                <table>
                    <thead>
                        <tr>
                            <th v-for="item in goodssizetable.title">{{item.text}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in goodssizetable.title">
                            <td v-for="con in item.con">{{con}}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td :colspan="goodssizetable.title.length"><span>温馨提示：</span>{{goodssizetable.prompt}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            -->
        </div>
        <!-- 累计评论 -->
        <div class="goods_details_comment container" v-show="showcon==2">
            <div class="goods_details_comment-title mb-20">
                <div class="left">
                    <h1>好评率</h1>
                    <h2>{{praiseOf}}<span>%</span></h2>
                    <h3>共{{commentclasslist[0].count}}人评论</h3>
                </div>
                <!--<div class="right">
                    <h1>大家觉得</h1>
                    <div class="right-arr"></div>
                    <div class="right-tag" v-for="(item,index) in commenttag">{{item.text}}（{{item.num}}）</div>
                </div>-->
            </div>
            <div class="goods_details_comment-con">
                <div class="top">
                    <div class="top-col" v-for="item,index in commentclasslist" :class="{'top-col_cur':(commontclass==index)}" @click="clickCommontClass(index)">
                        <div class="top-col-icon">
                            <div class="top-col-icon-cir"></div>
                        </div>
                        <p>{{item.name}}（{{item.count}}）</p>
                    </div>
                </div>

                <div class="con" v-for="item in commentlist" v-if="commentlist">
                    <div class="con-head">
                        <img :src="item.picImg">
                        <p>{{item.userName}}</p>
                        <!-- <p>{{item.commentId}}</p>-->
                    </div>
                    <div class="con-right">
                        <div class="con-right-code">
                            <i v-for="n,nindex in 5" :class="[(item.commodityDescription>nindex)?'icon-comment_xing_1':'icon-comment_xing_0']"></i>
                        </div>
                        <div class="con-right-con">
                            <p>{{item.content}}</p>
                        </div>
                        <div class="con-right-img" v-if="item.picture">
                            <div class="con-right-img-box" v-for="img in item.picture.split(',')"><img :src="img"></div>
                        </div>
                        <!--<div class="con-right-goods">
                            <p><span>{{item.goodsname}}.....</span><span>****{{item.comtime}}</span></p>
                            <h1><i :class="[item.zancur?'icon-comment_zan_cur':'icon-comment_zan']"></i>赞（{{item.zannum}}）</h1>
                        </div>-->
                        <div class="con-right-zhui" v-if="item.additionalContent!=null || item.additionalPicImg!=null">
                            <h1>[追评]</h1>
                            <p>{{item.additionalContent}}</p>
                        </div>
                        <div class="con-right-img" v-if="item.additionalPicImg">
                            <div class="con-right-img-box" v-for="img in item.additionalPicImg.split(',')"><img :src="img"></div>
                        </div>
                        <!--<div class="con-right-reply">
                            <p>聚衣商城 回复：<br>{{item.replycon}}</p>
                            <h1>{{item.replytime}}</h1>
                        </div>-->
                    </div>

                </div>
            </div>
        </div>
        <com-footer></com-footer>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <script src="../../lib/js/swiper.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>

    <script>
        goodsDetails();
    </script>
</body>

</html>